<script setup lang='ts' name="policy-add">
import type { PlusColumn } from 'plus-pro-components'

import { resetUserPwd } from '@fl/api/iam-api/user-manage'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'

const visible = defineModel<boolean>('visible', { required: true })
const userId = defineModel<string>('userid', { required: true })
const userName = defineModel<string>('username', { required: true })

const form = ref()
const title = ref('重置密码')

const initialState = {
    password: '',
    userId: '',
    userName: '',
}
const state = ref(cloneDeep(initialState))

watchEffect(() => {
    if (userName.value) {
        state.value.userName = userName.value
        state.value.userId = userId.value
    }
})

// 提交
async function submit() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        const params = {
            password: state.value.password,
            userId: Number(state.value.userId),
            userName: state.value.userName,
        }
        resetUserPwd(params).then((res) => {
            console.log()
            if (res.code === 200) {
                ElMessage.success('操作成功')
                cancel()
            }
        })
    }
}

function cancel() {
    visible.value = false
}

function reset() {
    userId.value = ''
    form.value.formInstance.resetFields()
}

const columns: PlusColumn[] = [
    {
        fieldProps: {
            disabled: true,
        },
        label: '登录名称',
        prop: 'userName',
        valueType: 'text',
    },
    {
        fieldProps: {
            maxlength: 20,
        },
        label: '输入新密码',
        prop: 'password',
    },
]
const reg = /^[a-zA-Z0-9]+$/
const validatorpassword = (rule, value, callback) => {
    // 编辑忽略密码校验
    if(reg.test(value)) {
        callback()
    } else {
        callback(new Error('请输入数字和英文'))
    }
        
}
const rules = {
    password: [
        {
            message: '请输入数字和英文',
            required: true,
            trigger: 'blur',
            validator: validatorpassword
        },
    ],
}
</script>

<template>
    <PlusDialog v-model="visible"
                :title="title"
                width="500"
                close-on-press-escape
                :has-footer="false"
                @cancel="cancel"
                @closed="reset"
    >
        <div class="mt-20">
            <PlusForm ref="form"
                      v-model="state"
                      :columns="columns"
                      :label-width="120"
                      :rules="rules"
                      :has-footer="false"
                      :row-props="{ gutter: 20 }"
            />
        </div>

        <div class="mx-auto mt20 flex justify-center">
            <el-button @click="cancel">
                取消
            </el-button>

            <SubmitBtn type="primary"
                       @click="submit"
            >
                提交
            </SubmitBtn>
        </div>
    </PlusDialog>
</template>
